<template>
  <el-dialog :visible="visible"
             :title="isUpdate ? '编辑' : '新增'"
             @close="visible = false">
    <el-form class="form">
      <el-form-item label="种植批次">
        <el-input v-model="formData.plantId" disabled/>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="formData.productName"
                  clearable disabled/>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="formData.address" />
      </el-form-item>
      <el-form-item label="销售地点">
        <el-input v-model="formData.site" />
      </el-form-item>
      <el-form-item label="运输方式">
        <el-select v-model="formData.shippingMethod">
          <el-option v-for="item in shippingMethodOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运输工具">
        <el-select v-model="formData.shippingTool">
          <el-option v-for="item in shippingToolOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运输时间">
        <el-date-picker v-model="formData.shippingTime"
                        type="datetime"
                        placeholder="种植时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
      <el-form-item label="员工">
        <el-select v-model="formData.employee"
                   class="sel2"
                   placeholder="请选择"
                   style="width: 186px;">
          <el-option v-for="item in employeeList"
                     :key="item.employee_id"
                     :label="item.employee_name"
                     :value="item.employee_name" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="formData.phone" />
      </el-form-item>
    </el-form>
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary"
               @click="confirm">确 定</el-button>
  </el-dialog>
</template>

<script>
import { saveShipping, updateShipping } from '@/api/plant/shipping'
import { shippingToolList, shippingMethodList } from "@/config/dict/trace"
import { getAllEmployee } from "@/api/plant/employee"
export default {
  data () {
    return {
      visible: false,
      isUpdate: false,
      formData: {
        id: '',
        plantId: '',
        productId: '',
        productName: '',
        regionId: '',
        regionDetail: '',
        address: '',
        site: '',
        shippingMethod: '',
        shippingTool: '',
        shippingTime: '',
        employee: '',
        phone: '',
      },
      shippingToolOption: shippingToolList,
      shippingMethodOption: shippingMethodList,
      employeeList: [],
    }
  },
  methods: {
    async init (data) {
      this.visible = true
      if (data != null) {
        this.isUpdate = true
        this.formData = data
      } else {
        this.isUpdate = false
        this.formData = {
          id: '',
          plantId: '',
          productId: '',
          productName: '',
          address: '',
          site: '',
          shippingMethod: '',
          shippingTool: '',
          shippingTime: '',
          employee: '',
          phone: '',
        }
      }
      getAllEmployee().then(res => {
        this.employeeList = res.data
      })
    },
    confirm () {
      if (this.isUpdate) {
        this.handleConform(updateShipping, this.formData)
      } else {
        this.handleConform(saveShipping, this.formData)
      }
    },
    handleConform (operation) {
      operation(this.formData).then(response => {
        if (response.statusCode == 20000) {
          this.refresh()
          this.visible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，操作失败',
            type: 'warning'
          })
        }
      })
    },
    refresh () {
      this.$emit('refresh')
    }
  }
}
</script>

<style>
.form {
  margin-bottom: 20px;
}
</style>
